<!-- 货拉拉 -->
<style>
    .layui-text em, .layui-word-aux {color: #000 !important;}
</style>
<script type="text/html" id="hll_html">
    <div class="layui-form" lay-filter="hll">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">发货人</label>
                    <div class="layui-input-block">
                        <span class="layui-word-aux" id="f_name"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发货人手机号</label>
                    <div class="layui-input-block">
                        <span class="layui-word-aux" id="f_mobile"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发货地址</label>
                    <div class="layui-input-block">
                        <span class="layui-word-aux" id="f_address"></span>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">收货人</label>
                    <div class="layui-input-block">
                        <span class="layui-word-aux" id="s_name"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收货人手机号</label>
                    <div class="layui-input-block">
                        <span class="layui-word-aux" id="s_mobile"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收货地址</label>
                    <div class="layui-input-block">
                        <span class="layui-word-aux" id="s_address"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择车型</label>
            <div class="layui-input-block">
                <select name="model" id="model" lay-filter="model" lay-search>
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车型图片</label>
            <div class="layui-input-block" id="model_img">待选择车型</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">总价</label>
            <div class="layui-input-block">
                <span class="layui-word-aux" id="total_price_fen">待计算</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">总里程</label>
            <div class="layui-input-block">
                <span class="layui-word-aux" id="distance_total">待计算</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">超出里程</label>
            <div class="layui-input-block">
                <span class="layui-word-aux" id="exceed_distance">待计算</span>
            </div>
        </div>
        <button class="layui-btn" lay-submit id="submit" lay-filter="submit" style="display:none;">保存</button>
    </div>
</script>
<script>
    var form;
    function tel_hll(order_goods_id) {
        //获取模板
        var getTpl = $("#hll_html").html();
        laytpl(getTpl).render({order_goods_id: order_goods_id}, function(html) {
            layer.open({
                type: 1,
                shadeClose: true,
                shade: 0.3,
                offset: 'auto',
                scrollbar: true,
                fixed: false,
                title: "呼叫货拉拉",
                area: ['1000px','720px'],
                btn: ['立即下单', '取消'],
                yes: function(index, layero){
                    $("#submit").click();
                },
                btn2: function(index, layero){
                    layer.close(index);
                },
                content:  html,
                cancel: function(){},
                success: function(layero, index){
                    //获取发货人和收货人信息
                    $.ajax({
                        url: ns.url("shop/login/get_info"),
                        type: "GET",
                        dataType: "JSON",
                        data: {order_goods_id: order_goods_id},
                        success: function (res) {
                            if(res){
                                res = JSON.parse(res);
                                $('#f_name').html(res.f_name);
                                $('#f_mobile').html(res.f_mobile);
                                $('#f_address').html(res.f_address);
                                $('#s_name').html(res.s_name);
                                $('#s_mobile').html(res.s_mobile);
                                $('#s_address').html(res.s_address);
                                form.render();
                                return true;
                            }
                            layer.msg(res.msg);
                        }
                    });
                    
                    //获取车型列表
                    $.ajax({
                        url: ns.url("shop/login/city_info"),
                        type: "GET",
                        dataType: "JSON",
                        data: {order_goods_id: order_goods_id},
                        success: function (res) {
                            res = JSON.parse(res);
                            if(res.ret == 0){
                                var models = res.data
                                    ,html = '<option value=""></option>';
                                $.each(models.vehicle_arr, function (i, v) {
                                    var item = v.vehicle_price_text_item;
                                    html += '<option data-img="'+ v.img_url_high_light +'" value="' + v.order_vehicle_id + '">'+v.name+'，'+item.text_weight+'，尺寸:'+item.text_size+'，体积:'+item.text_volume+'，起步公里数:'+item.start_distance_km+'km，起步价格:'+item.start_price_fen/100+'元，超出后:'+item.exceed_segment_price[0].price_extra_fen/100+'元/km' +'</option>';
                                });
                                $('#model').html(html);
                                form.render();
                                return true;
                            }
                            layer.msg(res.msg);
                        }
                    });

                    //监听车辆选择
                    form.on('select(model)', function (data) {
                        //打印车辆ID
                        console.log(data.value);
                        //显示车型图片
                        $('#model_img').html('<img layer-src src="'+$(data.elem).find("option:selected").data("img")+'" width="300">');
                        form.render();
                        //车辆ID储存到本地
                        localStorage.setItem('order_vehicle_id', data.value);
                        //开始计价
                        var index = layer.load(2, {shade: [0.9,'#fff']});
                        $.ajax({
                            url: ns.url("shop/login/order_price_calculate"),
                            type: "GET",
                            dataType: "JSON",
                            data: {'order_vehicle_id': data.value, 'order_goods_id': order_goods_id},
                            success: function (res) {
                                layer.close(index);
                                res = JSON.parse(res);
                                if(res.ret == 0){
                                    $('#total_price_fen').html(res.data.total_price_fen / 100 + ' 元');
                                    $('#distance_total').html(res.data.distance_total / 1000 + ' km');
                                    $('#exceed_distance').html(res.data.exceed_distance / 1000 + ' km');
                                    localStorage.setItem('total_price_fen', res.data.total_price_fen);
                                    form.render();
                                    return true;
                                }
                                layer.msg(res.msg);
                            }
                        });
                    });

                    //提交数据
                    form.on('submit(submit)', function(data){
                        var order_vehicle_id = localStorage.getItem('order_vehicle_id');
                        var total_price_fen = localStorage.getItem('total_price_fen');
                        if(data.field.model == ''){
                            layer.msg('请选择车型', {icon: 5, anim: 6});
                            return;
                        }

                        if (repeat_flag) return;
                        repeat_flag = true;
                        $.ajax({
                            url: ns.url("shop/login/order_request"),
                            type: "POST",
                            dataType: "JSON",
                            async: false,
                            data: {
                                order_goods_id:order_goods_id,
                                order_vehicle_id:order_vehicle_id,
                                total_price_fen:total_price_fen,
                            },
                            success: function (res) {
                                res = JSON.parse(res);
                                if(res.ret == 0){
                                    layer.msg((res.msg == 'Success') ? '呼叫成功' : res.msg, {time:1500}, function () {
                                        layer.closeAll();
                                        location.reload();
                                    });
                                }else{
                                    layer.msg(res.msg);
                                    repeat_flag = false;
                                }
                            }
                        });
                        return false;
                    });
                }
            });
            form.render();
        });
    }
</script>